<template>
  <div class="app-container">
      <div class="app-container-main">
          <div class="main-card-header">
              管理员列表
          </div>
          <div class="main-card-body">

              <div class="table">
                  <a-table :columns="columns" :data-source="data" :pagination="false">
                      <template #is_sc="{ record }">
                          <span v-if="(record.is_sc === 1)">是</span>
                          <span v-else>不是</span>
                      </template>
                      <template #bind_qywx="{ record }">
                          <a href="" v-if="(record.bind_qywx === 0)">[点击绑定]</a>
                          <a href="" v-else>已绑定</a>
                      </template>
                      <template #action="{ record }">
                          <a-button type="primary" @click="toedit">编辑</a-button>
                          <a-button @click="showModal">登录日志</a-button>
                          <a-button @click="rizhi">操作日志</a-button>
                          <a-button type="primary" danger @click="showDeleteConfirm">删除</a-button>
                      </template>
                  </a-table>
              </div>
              <div class="row">
                  <div class="row-button">
                      <a-button type="primary" @click="toadd">添加</a-button>
                  </div>
                  <div class="row-pagination">
                      <a-pagination v-model:current="current1" show-quick-jumper :total="1"
                          :show-total="total => `Total ${total} items`" @change="onChange" />
                  </div>
              </div>


          </div>
      </div>

      <!-- 登录日志对话框 -->
      <a-modal v-model:visible="visible" title="登录日志" :footer="null">
          <a-table :columns="logins" :data-source="log">
              <template #time>
                  <span>
                      Name
                  </span>
              </template>
            
          </a-table>

      </a-modal>
      <!-- 登录日志对话框 -->
      <a-modal v-model:visible="visibles" title="登录日志" :footer="null">
          <a-table :columns="logrizhi" :data-source="rz">
              <template #time>
                  <span>
                      Name
                  </span>
              </template>
            
          </a-table> 
  </a-modal>
  </div>

</template>

<script>
import { defineComponent, onMounted, ref, reactive, createVNode, } from "vue"
import { HomeOutlined, SmileOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { message, Modal } from 'ant-design-vue';
import { useRouter } from "vue-router"
const logins = [
{
  title: '时间',
  dataIndex: 'time',
  key: 'time',
},{
  title: '操作',
  dataIndex: 'cao',
  key: 'cao',
},
{
  title: 'IP',
  dataIndex: 'ip',
  key: 'ip',
},
{
  title: 'IP归属地',
  dataIndex: 'ips',
  key: 'ips',
},
]
const log = [
{
 time:'2022-09-12',
 cao:'登录成功',
 ip:'127.0.0.1',
 ips:'吉林长白山'
},
]
const logrizhi = [
{
  title: '时间',
  dataIndex: 'time',
  key: 'time',
},{
  title: '操作',
  dataIndex: 'cao',
  key: 'cao',
},
{
  title: 'IP',
  dataIndex: 'ip',
  key: 'ip',
},
{
  title: 'IP归属地',
  dataIndex: 'ips',
  key: 'ips',
},
]
const rz = [
{
 time:'2022-09-12',
 cao:'登录成功',
 ip:'127.0.0.1',
 ips:'吉林长白山'
},
]

export default defineComponent({
  components: {
      HomeOutlined,
      ExclamationCircleOutlined,
      SmileOutlined
  },
  setup() {
      // 登录日志显示对话框的显示隐藏
      const visibles = ref(false);

const rizhi = () => {
visibles.value = true;
};
      const router = useRouter()
      const valuess = ref('');

      const onSearch = (searchValue) => {
          console.log('use value', searchValue);
          console.log('or use this.value', valuess.value);
      };

      const current1 = ref(1);

      const onChange = (number) => {
          console.log('Page: ', pageNumber);
      };
      const toadd = () => {
          router.push('/sys/adminlist/add')
      }
      const toedit = () => {
          router.push('/sys/adminlist/edit')
      }

      const visible = ref(false);

      const showModal = () => {
          visible.value = true;
      };
      const showModal1 = () => {
          visible.value = true;
      };
      const showDeleteConfirm = () => {
          Modal.confirm({
              title: () => '提示',
              icon: () => createVNode(ExclamationCircleOutlined),
              content: () => '此操作将永久删除该数据, 是否继续?',
              okText: () => '确认',
              okType: 'danger',
              cancelText: () => '取消',
              onOk() {
                  console.log('OK');
              },
              onCancel() {
                  console.log('Cancel');
              },
          });
      };
      const handleOk = (MouseEvent) => {
          console.log(e);
          visible.value = false;
      };
      const handleOk1 = (MouseEvent) => {
          console.log(e);
          visible.value = false;
      };

      const handleSearchChange = () => {

      }
      // 主列表中的表格
      const columns = [{
          title: 'ID',
          width: 100,
          dataIndex: 'id',
          key: 'id',
      }, {
          title: '登录名',

          dataIndex: 'username',
          key: 'username',
      }, {
          title: ' 角色',
          dataIndex: 'role_name',
          key: 'role_name',
      }, {
          title: '是否是销售',
          dataIndex: 'is_sc',
          key: 'is_sc',
          width: 120,
          slots: { customRender: 'is_sc' },
      }, {
          title: '微信绑定',
          dataIndex: 'bind_qywx',
          key: 'bind_qywx',
          slots: { customRender: 'bind_qywx' },
      }, {
          title: '最后登录时间',
          dataIndex: 'last_login_time',
          key: 'last_login_time',
          width: 130
      }, {
          title: ' 最后登录IP',
          dataIndex: 'last_login_ip',
          key: 'last_login_ip',
      }, {
          title: '操作',
          key: 'action',
          slots: { customRender: 'action' },
          width: 400
      }];
      // 登录日志中的表格
      const columnslogin = [{
          title: '时间',
          width: 100,
          dataIndex: 'time',
          key: 'time',
      }, {
          title: '操作',

          dataIndex: 'caozuo',
          key: 'caozuo',
      }, {
          title: ' ip',
          dataIndex: 'ip',
          key: 'ip',
      }, {
          title: 'ip归属地',
          dataIndex: 'ipaddress',
          key: 'ipaddress',
          width: 120,
          slots: { customRender: 'is_sc' },
      },];
      const data = [{
          key: '1',
          id: 1,
          username: 'admin',
          role_name: '超级管理员',
          is_sc: 1,
          bind_qywx: 0,
          last_login_time: '2022-12-03 9:52',
          last_login_ip: '121.30.114.68:4013',

      }];
      const data1 = [{
          key: '1',
          time: '2022-12-03 9:52',
          caozuo: '登录成功',
          ip: '121.30.114.68:4013',
          ipaddress: '长白山'
      }]
      return {
          toedit,
          data,
          columns,
          current1,
          onChange,
          handleSearchChange,
          showDeleteConfirm,
          toadd,
          visible,
          showModal,
          showModal1,
          handleOk,
          columnslogin,
          data1,
          handleOk1,
          valuess,
          onSearch,
          logins,
          log,
          visibles,
          rizhi,
          logrizhi,
          rz
      }
  }
})
</script>


<style>

</style>